<!-- 分配公司页面 -->
<template>
  <el-dialog
    v-dialogDrag
    title="公司分配"
    :visible.sync="isDialogAssignCompanyShow"
    width="50%"
    :before-close="closeDialog"
  >
    <el-table
      ref="companyTable"
      :data="companyData"
      selectable
      height="350"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        align="center"
        type="selection"
        width="49"
      />
      <el-table-column
        align="center"
        label="公司编号"
        prop="code"
      />
      <el-table-column
        align="center"
        label="公司名称"
        prop="name"
      />
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="assignUsers">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { modifyRoleCompany } from '@/api/right/role'
import { commonQuery as companyQuery } from '@/api/org/company'

export default {
  name: 'DialogAssignCompany',
  props: {
    isDialogAssignCompanyShow: {
      require: true,
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 公司信息
      companyData: [],
      // 被选中的公司信息
      companyDataSelection: [],
      // 被选中的角色信息
      roleDataSelection: []
    }
  },
  mounted() {
    this.$nextTick(function() {
      /**
         * 获取公司信息
         */
      this.$on('getCompany', (roleDataSelection) => {
        this.roleDataSelection = roleDataSelection
        this.getCompany()
      })
    })
  },
  methods: {
    /**
       * 获取公司信息
       */
    async getCompany() {
      try {
        let res = await companyQuery({})
        if (res) {
          this.companyData = res.data
        } else {
          this.$$message.error('获取公司信息失败')
        }
      } catch {
        this.$$message.error('网络错误')
      }
    },
    /**
       * 分配公司
       */
    async assignUsers() {
      if (!this.companyDataSelection ||
        this.companyDataSelection.length === 0) {
        this.$message.error('请至少选择一条数据')
        return
      }

      // 提供角色和公司的id，作为接口的参数
      const roleIds = []
      const authCompanyIds = []
      this.roleDataSelection.map(item => { roleIds.push(item.id) })
      this.companyDataSelection.map(item => { authCompanyIds.push(item.id) })

      try {
        let res = await modifyRoleCompany({ roleIds, authCompanyIds })
        if (res) {
          this.userDataSelection = []
          this.roleDataSelection = []
          this.$message.success('公司分配成功')
          this.$emit('operateRoleSuccess')
          this.closeDialog()
        } else {
          this.$message.error('公司分配失败')
        }
      } catch {
        this.$message.error('网络错误')
      }
    },
    /**
      * 关闭弹窗
      */
    closeDialog() {
      this.$emit('closeDialog')
    },
    /**
      * 更改被选中数据的数组
      * @param {*} val 被选中的数据
      */
    handleSelectionChange(val) {
      this.companyDataSelection = val
    }
  }
}
</script>

  <style scoped>
  .searchForm{
    width: 380px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  </style>
